<template>
	<div id="app">
		<h1>abc-123</h1>
		<div>{{msg}}</div>
		<div>{{reversedMessage}}</div>
		<div>{{reversedMessageMethod()}}</div>
		<div v-bind:id="this.$route.query.id ? this.$route.query.id : 0">parameter :` {{this.$route.query.id}} ` is from other page</div>
		<div v-on:click="consoleSomething">Click to console something!</div>
        <propTest v-bind="testData"></propTest>
        <comm-header v-bind:userName="nickname"></comm-header>
        <CommHeader user-name="李四(不绑定属性)"></CommHeader>
        <div @click="login(1)">点击跳转登录页(URL传参)</div>
        <div @click="login(2)">点击跳转登录页(POST传参)</div>
	</div>
</template>
<script>
import propTest from '@/components/PropTest'
	export default {
	  	name: 'test',
	  	data () {
	    	return {
	      		msg: 'Welcome to This Vue.js App',
                url: 'http://ebooking.t.efreight.cn/htmltemplate/header.html',
                testData: {
	      		    msg: 'hello prop test',
                    title: 'this is title',
                },
                nickname: '张三',
	    	}
	  	},
	  	computed: {
		    // 计算属性的 getter
		    reversedMessage: function () {
		      // `this` 指向 vm 实例
		        return this.msg.split('').reverse().join('')
		    }
	  	},
	  	methods: {
	  		consoleSomething: function() {
	  			console.log('clicked!')
	  		},
	  		reversedMessageMethod: function() {
	  			return this.msg.split('').reverse().join('')
	  		},
            login: function(type) {
	  		    if (type == 1) {
                    this.$router.push({path: '/login', query:{ urlMsg:'请先登录(GET)'}});
                } else {
                    this.$router.push({name: 'LoginPage', params:{ postMsg:'请先登录(POST)'}});
                }

            }
	  	},
        components: {
            propTest,
        }
	}
</script>
